<template>
	<view class="address">
		<u-navbar :titleStyle="{fontWeight:'bold'}" title="我的收货地址" />
		<view class="address-search">
			<u-search height="40" bgColor="rgba(242,242,242,0.5)" @search="searchEvnet" @custom="searchEvnet" placeholder="请输入收货姓名"
				v-model="keyword"></u-search>
		</view>
		<view class="address-list" :style="{paddingBottom:safeArea?(safeArea + 55) + 'px':'80px'}">
			<address-item @deleteEvtne="deleteEvtne" :list="list" :mode="mode"/>
			<listempty mode="address" vh="300px" text="暂未添加地址" :list="list" />
		</view>
		<statusbar bagr>
			<view class="address-botem" :style="{paddingBottom:!safeArea?'20px':''}">
				<button class="address-button cu-btn" @click="createAddrs">新增收货地址</button>
			</view>
		</statusbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				page:1,
				limit:8,
				list:[],
				mode:'',
				total_page:''
			};
		},
		onLoad(e){
			this.mode = e.mode
			this.getListData()
		},
		onShow(){
			if(this.addrs_show){
				this.getListData()
			}
			if(this.addrs_renew){
				let obj = this.list.findIndex(item=> item.id == this.addrs_data.id)
				this.list[obj] = this.addrs_data
				this.$u.vuex('addrs_renew',false)
				this.$u.vuex('addrs_data',{})
			}
		},
		onReachBottom(){
			if(!this.dropdown(this.page,this.total_page)){
				this.page++
				this.getListData()
			}
		},
		methods:{
			createAddrs(){
				if(Object.keys(this.addrs_data).length !=0){
					this.$u.vuex('addrs_data',{})
				}
				this.multiRedirect('/subpkg/addressdetails/addressdetails')
			},
			searchEvnet(){
				if(!this.keyword)return
				this.list.map((item,index)=>{
					if(item.name.includes(this.keyword)){
						this.list.splice(index,1)
						this.list.unshift(item)
					}
				})
			},
			deleteEvtne(e){
				this.list.splice(e,1)
			},
			getListData(){
				this.showLoding()
				this.$network('/api/address/lists',{
					page:this.page,
					limit:this.limit
				}).then(res=>{
					const { list,total_page } = res.data
					if(this.page!=1){
						this.list = [...this.list,...list]
					}else{
						this.list = list
					}
					this.total_page = total_page
				}).finally((e) => {
					this.$nextTick(() => {
						this.showhideloding()
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #FFF;
	}
	.address-botem{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.address-button{
			width: 400rpx;
			height: 45px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 24px;
			background-color: #FFCF4F;
			font-size: 28rpx;
			color: #FFF;
			padding: 0;
			margin: 0;
			box-shadow: rgba(76,153,64, 0.3) 0px 7px 29px 0px;
		}
	}
	.address-list {
		padding: 0 10px 0 10px;
	}

	.address-search {
		padding: 25rpx 25rpx 0;

	}
</style>
